<template>
  <div class="hello">
    <h1>子组件2</h1>
    <h5>(父子组件通信响应式修改)</h5>
    修改：<input type="text" :value="value" @input="handlerChange">
    <h4>收到父组件传递的数据： {{ value }}</h4>
    <h4> Vuex演示：userName:{{this.$store.getters.fullName}}</h4>
    <input type="text" v-model="inputValue">
    <button @click="updateByAction">点击修改actions</button>
  </div>
</template>

<script>
export default {
  name: 'HelloChild',
  props: ["value"],  // 相当于 props: {value: String}
  data() {
    return {
      inputValue:''
    }
  },
  methods: {
    // 一旦 input 输入框发生改变，就把input上的value值传递给父组件
    handlerChange(e) {
      this.$emit("input", e.target.value)
    },
    //调用vuex的actions
    updateByAction(){
      this.$store.dispatch("updateUserName",this.inputValue)
    }
  }
}
</script>
<style scoped lang="scss">
.hello {
  background-color: beige;
}
</style>